<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		::-webkit-scrollbar {
			display: none;
		}

		html,
		body {

		}

		.el-container,
		.bottom {
			margin-top: 5px;
			line-height: 12px;
		}

		.button {
			padding: 0;
			float: right;
		}

		.image {
			width: 100%;
			display: block;
		}

		.clearfix:before,
		.clearfix:after {
			display: table;
			content: "";
		}

		.clearfix:after {
			clear: both
		}

		.block {
			margin: auto;
		}


	</style>
	<link rel="stylesheet"
		  href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.min.css"/>
	<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.min.js"></script>
</head>
<body>
<el-container id="app">
	<el-row :span="6">
		<div id="el_input" class="float-div">
			<el-input v-model="keyword" placeholder="请输入内容"></el-input>
		</div>
		<div id="el_button" class="float-div">
			<el-row>
				<el-button icon="el-icon-search" circle @click="toSearch">搜索</el-button>
			</el-row>

		</div>
		<!--								<span>类型</span><br>-->
		<el-row :span="6" style="margin-top: 10px" v-for="type in typeList">
			<el-button type="success" round="" v-text="type.type_name"
					   @click="selectShop(type.type_name)"></el-button>
		</el-row>

		<!--        <el-col :span="6" v-for="(o, index) in 8" :key="o" :offset="index > 0 ? 0 : 0">-->
		<el-col :span="6">

			<div style="padding: 14px;" v-for="shop in shopList">
				<el-card :body-style="{ padding: '0px' }" class="box-card">
					<img :src="shop.imgSrc" class="image">
					<div style="padding: 14px;">
						<span v-text="shop.name"></span>
						<div class="bottom clearfix">
							<el-button type="text" class="button"
									   @click.prevent="goToDetails(shop.shopId)">查看详情
							</el-button>
						</div>
					</div>
				</el-card>
			</div>
		</el-col>
	</el-row>
	<div class="block">
		<el-pagination
				@size-change="handleSizeChange(pageSize)"
				@current-change="handleCurrentChange(currentPage)"
				:current-page.sync="currentPage"
				:page-size="pageSize"
				layout="prev, pager, next, jumper"
				:total="total">
		</el-pagination>
	</div>


	<el-footer>
		<el-row></el-row>
	</el-footer>

</el-container>
<script>
	var shopShow = new Vue({
		el: "#app",
		data: {
			//
			currentPage: 1,
			pageSize: 4,
			currentDate: new Date(),
			shopList: [],
			typeList: [],
			typeName:'',
			total: 10,
			shopId: '',
			keyword: ""

		},
		methods: {
			initTypes() {
				let _this = this;
				$.get("/type/all", function (data) {
					_this.typeList = data
				})
			},
			initShopList() {
				console.log("初始化商铺列表")
				let _this = this
				let params = {
					currentPage: this.currentPage,
					pageSize: this.pageSize
				}
				$.post("/shop/getAll", params, function (data) {
					_this.shopList = data.records;
					_this.currentPage = data.current;
					_this.pageSize = data.size;
					_this.total = data.total;
				})
			},
			handleSizeChange(pageSize) {
				console.log(`每页 ${pageSize} 条`);
			},
			handleCurrentChange(currentPage) {
				console.log(`当前页: ${currentPage}`);
				let _this = this;
				let params = {
					currentPage: this.currentPage,
					pageSize: this.pageSize,
					typeName: this.typeName
				}
				$.post("/type/selectShopByType", params, function (data) {
					_this.shopList = data.records;
					_this.currentPage = data.current;
					_this.pageSize = data.size;
					_this.total = data.total;
				})
			},
			goToDetails(shopId) {
				location.href = "/shop/getShopDetails?shopId=" + shopId;
			},
			selectShop(typeName) {
				let _this = this;
				let params = {
					currentPage: this.currentPage,
					pageSize: this.pageSize,
					typeName: typeName
				}
				$.post("/type/selectShopByType", params, function (data) {
					_this.shopList = data.records;
					_this.currentPage = data.current;
					_this.pageSize = data.size;
					_this.total = data.total;
					_this.typeName = data.records[0].typeName;
				})
			},
			toSearch() {
				let _this = this;
				//搜索关键字不能为空
				if (!this.keyword) {
					alert("搜索关键词不能为空")
					return;
				}
				let params = {
					currentPage: 1,
					pageSize: 4,
					keyword: this.keyword
				}
				$.post("/shop/searchShopByES", params, function (data) {
					_this.shopList = data.records;
					_this.currentPage = data.current;
					_this.pageSize = data.size;
					_this.total = data.total;

				})
			}
		},
		created() {
			this.initShopList();
			this.initTypes();
		}
	});
</script>
</body>
</html>
